<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item><i class="el-icon-setting"></i> 配置页面</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div @click="backBtn">返回</div>
      <div>
        <el-tree
          :data="data"
          :props="defaultProps"
          show-checkbox
          @check-change="handleCheckChange"
          @node-click="handleNodeClick"
          node-key="sysCode"
          ref="tree"
        ></el-tree>
        <el-button
          type="primary"
          @click="submitClick"
        >确定</el-button>
        <el-button
          type="primary"
          @click="resetChecked"
        >取消</el-button>
      </div>
      <div>
      </div>
    </div>
  </div>
</template>
<script>
import { getMenuListAPI, getRolePageAPI } from '@/api/backStage.js';
function toTree(data) {
    let treeData = [];
    if (!Array.isArray(data)) return treeData;
    data.forEach((item) => {
        delete item.children; //删除item下的children，以防多次调用
    });

    let map = {};
    data.forEach((item) => {
        map[item.sysCode] = item;
    });

    data.forEach((item) => {
        let parent = map[item.parentCode]; //判断item的pid是否是否存在map中
        if (parent) {
            //如果存在则表示item不是最顶层的数据
            (parent.children || (parent.children = [])).push(item);
        } else {
            treeData.push(item); // 如果不存在 则是顶层数据
        }
    });
    return treeData;
}
export default {
    data() {
        return {
            // 菜单列表数据
            data: [],
            list: [],
            roleid: '',
            defaultProps: {
                // 通过 defaultProps 将 默认的转换成 后台返回给我们的对应的字段 渲染在页面
                value: 'parentCode',
                label: 'sysName'
            }
        };
    },
    mounted() {
        this.getMenuListData();
    },
    methods: {
        // 返回按钮 返回上一级
        backBtn() {
            this.$router.go(-1);
        },
        // 获取功能列表
        async getMenuListData() {
            this.roleid = this.$route.query.roleid;
            const res = await getMenuListAPI();
            if (res.code == 'succ') {
                this.data = toTree(res.result);
            }
        },
        // 确定
        async submitClick() {
            const res = await getRolePageAPI({
                token: this.$store.state.user.token,
                OprID: this.$store.state.user.oprid,
                Params: { Params: this.list }
            });
            if (res.code == 'succ') {
                this.$message.success(res.message);
            }
        },
        handleNodeClick(data) {},
        handleCheckChange(data, checked, indeterminate) {
            var obj = {};
            if (checked == true) {
                (obj.roleID = this.roleid), (obj.sysCode = data.sysCode);
                this.list.push(obj);
            } else if (checked == false) {
                this.list.pop(obj);
            }
        },
        resetChecked() {
            this.$refs.tree.setCheckedKeys([]);
        }
    }
};
</script>